<template>
    <div class="box4" ref="map">
        我是地图组件
    </div>
</template>

<script lang="ts" setup name="Map">
    import * as echarts from 'echarts'
    import {ref,onMounted} from 'vue'
    // 引入中国地图的数据json
    import chinaJSON from './china.json'

    // 获取dom元素
    let map=ref()
    // 注册中国地图
    echarts.registerMap('china',chinaJSON as any)

    onMounted(()=>{
        let mychart=echarts.init(map.value)
        // 设置配置项
        mychart.setOption({
            // 地图组件
            geo:{
                map:'china', // 中国地图
                roam:true, // 鼠标缩放
                // 地图的位置
                left:50,
                top:100,
                right:50,
                bottom:0,
                // 地图上文字的设置
                label:{
                    show:true, // 文字显示出来
                    color:'white',
                    fontSize:14

                },
                // 每一个多边形样式
                itemStyle:{
                    areaColor: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                offset: 0,
                                color: "#073684" // 0% 处的颜色
                                },
                                {
                                offset: 1,
                                color: "#061E3D" // 100% 处的颜色
                                }
                            ]
                    },
                    opacity:0.8 // 透明度
                },
                // 地图高亮的效果
                emphasis:{
                    itemStyle:{
                        areaColor:{
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#073684" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#2B91B7" // 100% 处的颜色
                            }
                            ]
                        }
                    },
                    label: {
                        color: "#fff",
                        show: true,
                        fontSize:20
                    },
                }
            },
            // 布局位置
            grid:{
                left:0,
                top:0,
                right:0,
                bottom:0
            },
            series:[
                {
                    type:'lines', // 航线的系列
                    data:[
                        {
                            coords: [
                                [116.405285, 39.9049896],  // 起点
                                [119.306239, 26.075302]   // 终点
                            ],
                            // 统一的样式设置
                            lineStyle: {
                                color:'#9999CC',
                                width:3
                            }
                        },
                        {
                            coords: [
                                [103.9526, 30.7617],
                                [85.294711, 41.371801]  // 终点
                            ],
                            // 统一的样式设置
                            lineStyle: {
                                color:'#9999CC',
                                width:3
                            }
                        },
                    ],
                    // 开启动画特效
                    effect: {
                        show: true,
                        symbol:'path://M832.553464 529.742812l50.798789 280.78399-52.7489 52.7489-186.827011-367.643845 154.602229-154.634198zM676.992164 236.650745l-150.126565 150.126564-351.307671-178.579001 52.7489-52.7489 448.653367 81.169368z',
                        color: "#6666CC", 
                        symbolSize: 20
                    }
                }
            ]
        })
    })

</script>

<style scoped>

</style>